<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row">
				<text class="title">服务器</text>
				<m-input type="text" v-model="server" placeholder="请输入服务器地址和端口"></m-input>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="bindLogin">连接</button>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'
	import uuid from 'uuid/v1';
	export default {
		components: {
			mInput
		},
		data() {
			return {
				server: '47.98.183.84:7070',
				positionTop: 0,
				isDevtools: false,
				timer: null,
				clientUpMessage:null
			}
		},
		computed: mapState(['forcedLogin']),
		methods: {
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
			bindLogin() {
				this.initWebSocket();
			},
			initWebSocket() { //初始化weosocket
				const wsuri = "ws://" + this.server;
				this.global.setWsUrl(wsuri);
				this.timer = setInterval(this.checkStatus, 200)
			},
			clearTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
			checkStatus(){
				if(this.global.websock.readyState==1)
				{
					//连接成功事件
					let tmp = {
						"uuid": uuid(),
						"type": "mobile",
						"method": "clientUp"
					};
					this.global.webSocketSend(tmp);
					this.clearTimer();
					uni.navigateBack();
				}
			}
		},
		onReady() {
			this.initPosition();
			// #ifdef MP-WEIXIN
			this.isDevtools = uni.getSystemInfoSync().platform === 'devtools';
			// #endif
		}
	}
</script>

<style>
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		position: relative;
		width: 50px;
		height: 50px;
		border: 1px solid #dddddd;
		border-radius: 50px;
		margin: 0 20px;
		background-color: #ffffff;
	}

	.oauth-image image {
		width: 30px;
		height: 30px;
		margin: 10px;
	}

	.oauth-image button {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
</style>
